<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jquery event</title>
		<script src="../js/jquery-3.2.1.min.js"></script>
		<script>
			$(function(){
				$("#d1").one("click",function(){
					alert("div was click");
				});
				/*$("#d2 li").hover(function(){
					$(this).css("font-size","30px");
				},function(){
					$(this).css("font-size","16px");
				});*/
				/*$("#d2 li").mouseover(function(){
					$(this).css("font-size","30px");
				}).mouseout(function(){
					$(this).css("font-size","16px");
				});*/
				/*$("#d2 li").live("mouseover",function(){
					$(this).css("font-size","30px");
				}).live("mouseout",function(){
					$(this).css("font-size","16px");
				});*/
				$("#d2").delegate("li","mouseover",function(){
					$(this).css("font-size","30px");
				}).delegate("li","mouseout",function(){
					$(this).css("font-size","16px");
				});
				$("#addFruit").click(function(){
					var nf=window.prompt("请输入新水果"); 
					//$("#d2 ul").append($("<li></li>").append(nf));
					$("#d2 ul").append($("<li>"+nf+"</li>"));
				});
				$("#trigEvent").click(function(){
					$("#d2 li:eq(1)").trigger("mouseover");
				});
			});
		</script>
	</head>
	<body>
		<div id="d1" style="height: 100px; border: 1px  solid red;">
			
		</div>
		<div id="d2">
			<ul>
				<li>苹果</li>
				<li>梨子</li>
				<li>枣子</li>
				<li>葡萄</li>
			</ul>
		</div>
		<input type="button" value="添加新水果" id="addFruit"/>
		<input type="button" value="触发鼠标事件" id="trigEvent"/>
	</body>
</html>
